'use client';

import type { IConfigImage, IConfigImageItem } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';

export default function QueryConfigImage({
  details,
}: {
  details: IConfigImage;
}) {
  const login = details.list.LOGIN;
  const register = details.list.REGISTER;

  return (
    <div className="row">
      <div className="col">
        <div className="vstack gap-4">
          <ImageItem id="login" item={login} />

          <ImageItem id="register" item={register} />
        </div>
      </div>
    </div>
  );
}

const ImageItem = ({ id, item }: { id: string; item?: IConfigImageItem }) => {
  if (item) {
    const captchaConfig = item.captchaConfig;

    return (
      <div className="row">
        <div className="col">
          <div className="card">
            <div className="card-header bg-transparent text-muted">
              <i className="bi bi-info-square me-2"></i>
              {id === 'login' && '登录配置'}
              {id === 'register' && '注册配置'}
            </div>
            <div className="card-body">
              <div className="table-responsive">
                <table className="table table-hover align-middle table-striped">
                  <thead>
                    <tr className="text-nowrap">
                      <th scope="col" className="fw-normal">
                        ID
                      </th>
                      <th scope="col" className="fw-normal">
                        {id}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {[...Object.keys(captchaConfig)]
                      .filter((item) => !['id'].includes(item))
                      .map((item) => {
                        return (
                          <tr key={item} className="text-nowrap">
                            <td>
                              {item === 'enable' && '是否启用'}
                              {item === 'expire' && '有效期'}
                              {item === 'total' && '有效次数'}
                              {item === 'interval' && '间隔时间'}
                              {item === 'recoveryTime' && '次数恢复时间'}
                              {item === 'length' && '长度'}
                              {item === 'alphanumeric' && '字母数字'}
                              {item === 'alphabetic' && '字母'}
                              {item === 'ascii' && 'Ascii'}
                              {item === 'numeric' && '数字'}
                            </td>
                            <td>
                              {item === 'enable' && captchaConfig[item] + ''}
                              {item === 'expire' && captchaConfig[item]}
                              {item === 'total' && captchaConfig[item]}
                              {item === 'interval' && captchaConfig[item]}
                              {item === 'recoveryTime' && captchaConfig[item]}
                              {item === 'length' && captchaConfig[item]}
                              {item === 'alphanumeric' &&
                                captchaConfig[item] + ''}
                              {item === 'alphabetic' &&
                                captchaConfig[item] + ''}
                              {item === 'ascii' && captchaConfig[item] + ''}
                              {item === 'numeric' && captchaConfig[item] + ''}
                            </td>
                          </tr>
                        );
                      })}
                  </tbody>
                </table>
              </div>

              {Object.keys(captchaConfig).length === 0 && (
                <div className="text-center text-muted">暂无配置</div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <Alert message="暂无配置" />;
};
